<!-- 街机 -->
<template>
  <el-dialog v-if="show" :modelValue="show" :title="GameName(indexStore.gameArray, 9) + $t('381')" top="10vh" class="arcade-dialog" :close-on-click-modal="false" :close-on-press-escape="false"
    @close="onHideDetails">
    <el-form :model="data" class="addQuery" ref="addQuery" :rules="rules" 
      :validate-on-rule-change="false" :disabled="isDisableUser">
      <form-item :title="t('41')" value="game_name">
        <div class="gameIcon">
          <div class="flex marginR5">
            <el-tag size="small">{{ GameCategory(indexStore.gameArray, 9) }}</el-tag>
            <img class="game-icon" :src="selectToLabel(GAMEICON, 9)" alt="">
          </div>
          {{ GameName(indexStore.gameArray, 9) }}
        </div>
      </form-item>
      <form-item :title="$t('267')" :pass="true" value="win_big_num">
        <el-input-number :min="0" size="large" v-model="data.win_big_num"  :precision="2"
          clearable controls-position="right" />
          <div class="input-text">{{$t('268')}}</div>
      </form-item>
      <form-item :title="$t('271')" :pass="true" value="min_num">
        <el-select v-model="data.min_num" filterable>
          <el-option v-show="item" v-for="item in 20" :label="item" :value="item" />
        </el-select>
          <div class="input-text">{{$t('272')}}</div>
      </form-item>
      <form-item :title="$t('273')" :pass="true" value="max_num">
        <el-select v-model="data.max_num" filterable>
          <el-option v-show="item && item>=data.min_num" v-for="item in 20" :label="item" :value="item" />
        </el-select>
        <div class="input-text">{{$t('274')}}</div>
      </form-item>
      <form-item :title="$t('269')" :pass="true" value="begin_num">
        <el-select v-model="data.begin_num" filterable>
          <el-option v-show="item && item>=data.min_num && data.max_num>=item" v-for="item in 20" :label="item" :value="item" />
        </el-select>
        <div class="input-text">{{$t('270')}}</div>
      </form-item>
      <form-item :title="$t('249')" :pass="true" value="deduction_rate">
        <el-select v-model="data.deduction_rate" filterable>
          <el-option v-show="item" v-for="item in 3" :label="item+'%'" :value="item" />
        </el-select>
        <div class="input-text">{{$t('275')}}</div>
      </form-item>
      <form-item :title="$t('276')" :pass="true" value="online_odds">
        <el-input-number :min="0" :max="10000" v-model="data.online_odds" size="large"  clearable
          controls-position="right" />
          <div class="input-text">{{$t('277')}}</div>
      </form-item>
      <form-item :title="$t('278')"  :pass="true" value="bet_range"  style="position:relative" :subtract='props.isDisableUser?false:true' @addItem="addPressure" @reduceItem="reducePressure">
        <div class="flex " v-for="(item, index) in data.pressureList" :key="index">
          <el-input-number @change="() => changeNum(item.num,index)" class="width140 marginB5 marginR10" v-model="item.num" :min="0" :max="200" size="large" :precision="2"
            controls-position="right" />
        </div>
        <div class="input-text">{{ $t('279') }}</div> 
      </form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer" v-show="!props.isDisableUser">
        <el-button @click="onHideDetails">{{$t('240')}}</el-button>
        <el-button type="primary" @click="save">{{$t('241')}}</el-button>
      </div>
    </template>
  </el-dialog>
</template> 

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted, watch, nextTick } from 'vue'
import { type FormRules, type FormInstance, ElMessage } from 'element-plus';
import FormItem from '@/components/FormItem/FormItem.vue'
import { getMineConfig, updateMineConfig } from '@/api/settion'
import { BigWan, BigTimeWan, BigDiv, BigTimes } from '@/utils/math'
import { GAMEICON } from '@/config/eunm'
import { throttle,selectToLabel, GameCategory, GameName } from '@/utils/index'

import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { useStore } from '@/stores/index'
const indexStore = useStore()

const props = defineProps({
  show: Boolean, //  弹框显示
  isDisableUser: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  query:{
    type:Object,
    default:() => {
      return {
        id:0, // 飞机 id 
        type:0 , //查看1 或者编辑0
        agent_id:0, // 商户id
        game_id:0 , // 游戏id
        game_name:'' , // 游戏名称
      }
    }
  }
})

const data = reactive({
  win_big_num:0, // 可赢最大额度
  begin_num:0, // 默认雷数
  min_num:0, // 最小雷数
  max_num:0, // 最大雷数
  deduction_rate:0, // 扫雷扣点率
  online_odds:0, // 扫雷赔率上限
  pressureList:[{num:0}], // 押注刻度  数组
  mine_num_range:'', // 最小  最大  默认  雷数 1,20,3
  bet_range:'', // 押注刻度  1000,2000,3000
  // pool:0,// 游戏水位
})
// 校验
const rules = reactive<FormRules<typeof data>>({
  win_big_num: [{ required: true, message: t('268'), trigger: 'blur' }],
  begin_num: [{ required: true, message: t('270'), trigger: 'blur' }],
  min_num: [{ required: true, message: t('272'), trigger: 'blur' }],
  max_num: [{ required: true, message: t('274'), trigger: 'blur' }],
  deduction_rate: [{ required: true, message: t('275'), trigger: 'blur' }],
  online_odds: [{ required: true, message: t('277'), trigger: 'blur' }],
  // pool: [{ required: true, message: '请输入游戏水位', trigger: 'blur' }],
})

watch(
  () => props.show,
  async (show) => {
    if (show) {
      getData()
    }
  }
)

// 获取数据转化
const getData = async () => {
  const userInfo = JSON.parse(localStorage.getItem('userInfo') as string)
  const [res]  = await Promise.all([getMineConfig({ agent_id: userInfo.id,game_id: 9 })]) 
  let arrBet = [];
  // 押注刻度
  if (res.data.bet_range) {
    data.pressureList = []
    arrBet = res.data.bet_range.split(',')
    arrBet.forEach((item: string) => {
      data.pressureList.push({ num: BigWan(Number(item)) })
    })
  } else {
    data.pressureList = [{"num":0.1},{"num":0.2},{"num":0.3},{"num":0.4},{"num":0.5},{"num":0.6},{"num":0.7},{"num":0.8},{"num":1.2},{"num":2},{"num":4},{"num":10},{"num":20},{"num":50},{"num":100}]
  }
  if (res.data.mine_num_range) {
    arrBet = res.data.mine_num_range.split(',')
    data.min_num = Number(arrBet[0])
    data.max_num = Number(arrBet[1])
    data.begin_num = Number(arrBet[2])
  } else {
    data.min_num = 1
    data.max_num = 20
    data.begin_num = 3
  }
  res.data.online_odds = Number(res.data.online_odds)
  Object.assign(data, res.data)
  data.win_big_num = BigWan(res.data.win_big_num)
  data.deduction_rate = BigDiv(res.data.deduction_rate, 100)
  // data.pool = BigWan(res2.data)
}

const addQuery = ref<FormInstance>()

// 新增押注倍数
const addPressure = () => {
  data.pressureList.push({ num: 0 })
}
// 减少押注倍数
const reducePressure = () => {
  if (data.pressureList.length <= 1) {
      ElMessage({
        message: t('373'),
        type: 'warning'
      })
    return 
  }
  data.pressureList.splice(data.pressureList.length - 1, 1)
}


// 设置数据 
const setData = (item: { win_big_num: number; begin_num: number; min_num: number; max_num: number; deduction_rate: number; online_odds: number; pressureList: { num: number; }[]; mine_num_range: string; bet_range: string; }) => {
  let query = JSON.parse(JSON.stringify(item))
  query.online_odds = JSON.stringify(BigTimeWan(query.online_odds))
  query.win_big_num = JSON.stringify(BigTimeWan(query.win_big_num))
  let list = query.pressureList.map((item:{num:number}) => BigTimeWan(item.num))
  query.bet_range = list.join(',');
  query.mine_num_range = query.min_num + ',' + query.max_num + ',' + data.begin_num;
  query.deduction_rate = JSON.stringify(BigTimes(query.deduction_rate, 100))
  return query
}

const changeNum = (num:number | null, index:number) => {
  if (!num) {
    data.pressureList[index].num = 0
  }
}

// 保存
const save = throttle( async () => {
  if (!addQuery.value) return
  await addQuery.value.validate(async (valid, fields) => {
    if (valid) {
      let query = setData(data)
      // let waterQuery = {
      //   game_id:props.query.game_id,
      //   pool:BigTimeWan(query.pool)
      // }
      if (query.begin_num < query.min_num ||  query.begin_num > query.max_num ) {
        ElMessage({
          message: t('374'),
          type: 'warning'
        })
        return 
      }
      // ,changeWaterLevel(waterQuery) 
      await Promise.all([updateMineConfig(query)]) 
      ElMessage({
        message: t('342'),
        type: 'success'
      })
      onHideDetails()
    }
  })
}, 3000)

// 取消
const emit = defineEmits(['onHideDetails'])
const onHideDetails = () => {
  emit('onHideDetails', false)
}

</script>
<style scoped lang="scss">
.input-text{
  display: block;
  flex-basis:100%;
  font-size: 12px;
}

</style>
<style>
.arcade-dialog .el-dialog__body{
  height: 650px;
  overflow: auto
}
</style>